<template>
  <n-flex>
    <n-spin :show="loading" style="width: 750px;">
      <template #description>
        加载中
      </template>
      <n-calendar class="calendar" v-model:value="stamp" #="{ year, month, date }" @panel-change="panelChange"
        @update:value="handleUpdateValue">
        <n-flex vertical class="tag">
          <div class="success">已完成</div>
          <div class="padding">未完成</div>
          <div class="fail">已超期</div>
        </n-flex>
      </n-calendar>
    </n-spin>
    <div style="height: 300px; width: 100px;overflow-y: auto;overflow-x: hidden;">

      <div style="height: 500px; width: 100px;"></div>
    </div>
  </n-flex>

</template>

<script setup>
import dayjs from 'dayjs'
import { useMessage } from "naive-ui";
import { defineComponent, ref, computed, onMounted } from "vue";
const stamp = ref(dayjs().valueOf())
const formatDate = ref('')
const loading = ref(true)
const handleUpdateValue = (date) => {
  console.log(date);
}

const panelChange = (item) => {
  console.log(item);

}
onMounted(() => {
  stamp.value = dayjs().valueOf()
  setTimeout(() => {
    loading.value = false
  }, 5000);
})
// const value = computed({
//   get: () => {

//   },
//   set: () => {

//   }
// })

</script>

<style lang="less">
.calendar {
  width: 750px;
  // height: 600px;

  .tag {
    .success {
      border-radius: 5px;
      font-size: 10px;
      background-color: #4098fc;
      line-height: 16px;
      text-align: center;
      color: #fff;
    }

    .padding {
      border-radius: 5px;
      font-size: 10px;
      background-color: #f0a020;
      line-height: 16px;
      text-align: center;
      color: #fff;
    }

    .fail {
      border-radius: 5px;
      font-size: 10px;
      background-color: #d03050;
      line-height: 16px;
      text-align: center;
      color: #fff;
    }
  }
}
</style>